<!--
*******************************************************************************
 * Copyright © 2017-2018 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *******************************************************************************
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Rules Engine</title>
	<link href="/css/ruleengine.css" rel="stylesheet">
</head>

<body>
	<!--  rule-engine-list section start  -->

	<div id="rule-engine-list">

		<div class="panel panel-success">
			<div class="panel-heading">
				<h3 class="panel-title">Rule Engine</h3>
			</div>
			<div class="panel panel-default" style="border:none;outline:none;margin:0;">
				<div class="panel-heading" style="padding:5px 2px;">
					<button type="button" class="btn btn-danger" onclick="orgEdgexFoundry.supportRuleEngine.deleteRule();">
						<i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;Delete
					</button>
					<!-- <button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.detail();">
						<i class="fa fa-book" aria-hidden="true"></i>&nbsp;Details
					</button> -->
					<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.addRule();">
						<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add
					</button>
				</div>
			</div>

			<div class="panel-body" style="padding:0;">
				<table class="table table-responsive table-hover table-striped">
					<thead>
						<tr class="active">
							<th></th>
							<th>#</th>
							<th>ID</th>
							<th>Name</th>
							<th>Created</th>
							<th>Modified</th>
						</tr>
					</thead>
					<tbody></tbody>
					<tfoot>
						<tr align="center">
							<td colspan=6>No Data.</td>
						</tr>
					</tfoot>
				</table>
			</div>
		</div>

	</div>
	<!-- rule-engine-list section end -->

	<!-- add new rule section start -->
	<div id="rule-add-new">

		<div class="panel panel-success">
		  <div class="panel-heading">
		    <h3 class="panel-title">Add New Rule</h3>
		  </div>
		  <div class="panel panel-default" style="border:none;outline:none;margin:0;">
		    <div class="panel-heading" style="padding:5px 2px;">
					<button type="button" class="btn btn-warning" onclick="orgEdgexFoundry.supportRuleEngine.cancelAdd();">
						<i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;Back
					</button>
					<button type="button" class="btn btn-success" onclick="orgEdgexFoundry.supportRuleEngine.commitRule();">
						<i class="fa fa-check" aria-hidden="true"></i>&nbsp;Submit
					</button>
		    </div>
		  </div>

		  <div class="panel-body" style="padding:8px;">
				<div class="info_header">
					<span>General</span>
					<div></div>
				</div>
				<table>
					<tr>
						<td>Name &nbsp;&nbsp;</td>
						<td><input type="text" name="name" class="form-control" placeholder="name unique"></td>
					</tr>
				</table>
				<div class="info_header">
					<span>Condition</span>
					<div></div>
				</div>
				<table class="condition_device_list">
					<tr>
						<td>Device Name</td>
						<td>
							<div id="condition_device_list">
								<div class="select_panle">
									<div class="input-group">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
										</div>
										<input type="text" name="condition_device_name" class="form-control" disabled>
									</div>
								</div>

								<table class="table table-striped">
									<thead>
										<tr>
											<th></th>
											<th>#</th>
											<th>ID</th>
											<th>Name</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
									<tfoot>
										<tr>
											<td colspan=4>
												<nav aria-label="Page navigation">
													<ul class="pagination pagination-sm">
														<li>
															<a href="#" aria-label="Previous">
																<span aria-hidden="true">&laquo;</span>
															</a>
														</li>
														<li><a href="#">1</a></li>
														<li><a href="#">2</a></li>
														<li><a href="#">3</a></li>
														<li><a href="#">4</a></li>
														<li><a href="#">5</a></li>
														<li>
															<a href="#" aria-label="Next">
																<span aria-hidden="true">&raquo;</span>
															</a>
														</li>
													</ul>
												</nav>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</td>
						<td>Parameter</td>
						<td>
							<select class="form-control" name="parameter" style="width:200px;">
								<option>11</option>
								<option>22</option>
								<option>22</option>
							</select>
						</td>
						<td>Operation</td>
						<td>
							<select class="form-control" name="operation" style="width:100px;">
								<option value=">">&gt;</option>
								<option value="=">=</option>
								<option value="<">&lt;</option>
							</select>
						</td>
						<td>Argument</td>
						<td><input type="text" name="operand2" class="form-control" placeholder=""></td>
					</tr>
				</table>

				<div class="info_header">
					<span>Action</span>
				</div>
				<table class="action_device_list">
					<tr>
						<td>Device Name</td>
						<td>
							<div id="action_device_list">
								<div class="select_panle">
									<div class="input-group">
										<div class="input-group-btn">
											<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
										</div>
										<input type="text" name="action_device_name" class="form-control" disabled>
									</div>
								</div>
								<table class="table table-striped">
									<thead>
										<tr>
											<th></th>
											<th>#</th>
											<th>ID</th>
											<th>Name</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</td>
						<td>Command</td>
						<td>
							<select style="width:200px;" name="commandName" class="form-control"></select>
						</td>
						<td id="action_device_param"></td>
					</tr>
				</table>
		  </div>
		</div>

	</div>
	<!-- add new rule section end -->

</body>
<script src="/js/pages/ruleengine.js"></script>

</html>
